<template>
	<view>
		<view class="uni-header">
			<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
		</view>
		<view class="uni-container">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>游戏聊天</span>
					<el-button style="float: right; padding: 3px 0;" type="text"
						@click="dialogFormVisible = true; chatLog1=[]">
						玩家聊天日志</el-button>
				</div>
				<div style="height: 1000rpx;display: block;verflow-x: hidden;overflow-y: auto;">
					<div v-for="o in chatLog" :key="o"
						:style="!o.includes('[Announcement]')?'font-size: 15px;':'text-align: right;padding: 3px 0;font-size: 15px;'">
						{{o }}
						<el-divider></el-divider>
					</div>
				</div>
			</el-card>
			<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="90%" class="demo-dynamic">
				<div style="display: flex;justify-content: space-between;align-items: flex-end;">
					<div style="padding: 10px 0;width: 90%;flex: 11;">
						<el-input :rows="5" placeholder="请填写聊天内容" v-model="dynamicValidateForm.chat">
						</el-input>
					</div>
					<div
						style="padding: 10px 0 0 0;margin: 10px 0;display: flex;flex-wrap: nowrap;margin-left: 10px;width: 130px;justify-content: space-between;">
						<el-popover placement="right" width="300" trigger="hover">
							<div class="demo-image">
								<span class="block" v-for="(item,index) in meme">
									<el-image
										style="width: 30px; height: 30px;display: inline-block;margin-right: 10px;margin-bottom: 10px;"
										:src="'./static/images/dst/'+index+'.jpg'" @click="setMeme(index)">
									</el-image>
								</span>
							</div>
							<el-button style="margin-left: 10px !important;" type="success" slot="reference"
								icon="el-icon-plus" circle>
							</el-button>
						</el-popover>

						<el-button type="primary" @click.passive="sendBroadcast()">发送</el-button>
					</div>
				</div>
			</el-form>
			<el-dialog title="玩家聊天日志" :visible.sync="dialogFormVisible">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<div style="width: 400px;">
							<el-input style="width: 80%;" placeholder="请输入需要拉取的日志行数" v-model="num" type="number"
								clearable>
							</el-input>
							<el-button type="primary" @click="getDstChatLog(num,1)">拉取</el-button>
						</div>
					</div>
					<div style="height: 800rpx;display: block;verflow-x: hidden;overflow-y: auto;">
						<div v-for="o in chatLog1" :key="o"
							:style="!o.includes('[Announcement]')?'font-size: 15px;':'text-align: right;padding: 3px 0;font-size: 15px;'">
							{{o }}
						</div>
					</div>
				</el-card>
			</el-dialog>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatLog: [],
				chatLog1: [],
				dialogFormVisible: false,
				dynamicValidateForm: {
					chat: ""
				},
				num: 10,
				meme: ['󰀁', '󰀂', '󰀃', '󰀄', '󰀅', '󰀇', '󰀈', '󰀉', '󰀊', '󰀋', '󰀌', '󰀍', '󰀎', '󰀏', '󰀀', '󰀐',
					'󰀑', '󰀒', '󰀓', '󰀔', '󰀆', '󰀕', '󰀗', '󰀛', '󰀚', '󰀘', '󰀙', '󰀣', '󰀮', '󰀜', '󰀠', '󰀝',
					'󰀤', '󰀭', '󰀯', '󰀥', '󰀡', '󰀢', '󰀨', '󰀬', '󰀦', '󰀪', '󰀧', '󰀩', '󰀫', '󰀟', '󰀞'
				]
			}
		},
		created() {
			const timer = setInterval(() => {
				this.getDstChatLog(5, 0);
				// 某些定时器操作   
			}, 1000);
			// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。 
			this.$once('hook:beforeDestroy', () => {
				clearInterval(timer);
			})

		},
		beforeDestroy() {},
		methods: {
			sendBroadcast() {
				if (this.dynamicValidateForm.chat) {
					this.$http.get("/home/sendBroadcast?message=" + this.dynamicValidateForm.chat).then((data) => {
						if (data.code != 0) {
							this.$message({
								message: data.message,
								type: 'warning'
							});
						}
						this.dynamicValidateForm.chat = ""
						this.$message({
							message: '发送成功',
							type: 'success'
						});
					})
				} else {
					this.$message({
						message: '请填写聊天内容',
						type: 'warning'
					});
				}
			},
			getDstChatLog(val, i) {
				this.$http.get("/system/getDstChatLog?rowNum=" + val).then((data) => {
					if (data.data) {
						data.data.forEach(e => {
							if (i == 0) {
								if (!this.chatLog.includes(e)) {
									this.chatLog.push(e)
								}
							}else{
								this.chatLog1.push(e)
							}
							
						})
					}
				})
			},
			setMeme(val) {
				this.dynamicValidateForm.chat += this.meme[val]
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .el-divider--horizontal {
		margin: 8px 0;
	}
</style>